<template>
  <div class="baoxiao">
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <van-search
        v-model="searchQuery"
        shape="round"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        input-align="center"
      />
      <SortTable :titles="titles" :rows="rows"></SortTable>
      <div class="row">
        <van-pagination
          v-model="currentPage"
          :total-items="120"
          :show-page-size="5"
          :items-per-page="6"
        />
      </div>
      <div class="row">
        <van-button type="info" @click="baoxiaoinput">新增录入发票</van-button>
        <van-button type="warning" @click="billcheck">查看选中单据</van-button>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import SortTable from '@/components/SortTable.vue';
import { Toast } from 'vant';

export default {
  name: 'Baoxiao',
  components: {
    SortTable,
  },
  data() {
    return {
      titlename: '我的报销',
      count: 0,
      isLoading: false,
      searchQuery: '',
      active: 0,
      currentPage: 1,
      rows: [
        {
          1: 'u0012332',
          2: '9500.68',
          3: '16',
          4: '04-15',
          id: 1,
        },
        {
          1: 'u0012333',
          2: '58500.00',
          3: '6',
          4: '03-07',
          id: 2,
        },
        {
          1: 'u0012334',
          2: '4622.00',
          3: '4',
          4: '02-19',
          id: 3,
        },
        {
          1: 'u0012335',
          2: '4655.50',
          3: '3',
          4: '02-05',
          id: 4,
        },
        {
          1: 'u0012336',
          2: '8900.00',
          3: '8',
          4: '01-01',
          id: 5,
        },
      ],
      titles: [
        { tname: '单据编号', id: 1 },
        { tname: '发票金额', id: 2 },
        { tname: '发票数量', id: 3 },
        { tname: '提报日期', id: 4 },
      ],
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.count += 1;
      }, 1000);
      window.scrollTo(0, 0);
    },
    baoxiaoinput() {
      this.$router.push('/BaoxiaoInput');
    },
    billcheck() {
      this.$router.push('/Billcheck');
    },
  },
};
</script>
